<template>
  <div>
    <div style="display: flex;justify-content: space-between; width: 100%">
      <el-form
        :model="formData"
        label-position="left"
        label-width="100px"
        :rules="ruleForm"
        ref="ruleForm"

      >
        <el-form-item label="路线名称" prop="name">
          <el-input v-model="formData.name" style="width: 200px" type="text" placeholder="请输入路线名称" />
        </el-form-item>
        <el-form-item label="选择景区" prop="tour_scenic_id">
          <el-select v-model="formData.tour_scenic_id"
                     @change="changeScenic"
                     filterable placeholder="请选择景区">
            <el-option
              v-for="item of scenicList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="途经景点" class="is-required" prop="location_point_arr">
          <el-select v-model="scenicSpot" clearable placeholder="请选择景点">
            <el-option
              v-for="item of scenicSpotList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <i class="el-icon-circle-plus-outline"
             style="font-size: 24px;cursor: pointer;margin-left: 4px;"
             @click="handleAdd"></i>
<!--          <i class="el-icon-remove-outline"-->
<!--             style="font-size: 24px;cursor: pointer;"-->
<!--             @click="handleAddOrDetele(index,'dir')"></i>-->
          <el-steps :active="scenicSpotName.length" align-center style="width: 860px;">
            <el-step v-for="(item,index) in scenicSpotName" :key="index" :title="item.name"></el-step>
          </el-steps>
        </el-form-item>
        <div>
          <div class="toolbar">
            <el-button style="margin-top: 12px;" @click="changeEditable">{{ this.polyline.editable?'完成':'编辑' }}</el-button>
          </div>
          <div class="amap-wrapper">
            <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo">
              <el-amap-polyline strokeColor="#e12" :editable="polyline.editable"  :path="polyline.path" :events="polyline.events"></el-amap-polyline>
              <el-amap-marker ref="Marker" v-for="(marker, index) in addMarkers" :vid="index"
                              :position="marker.position"
                              animation="AMAP_ANIMATION_DROP"
              ></el-amap-marker>
            </el-amap>
          </div>
        </div>
        <el-form-item label="距离" prop="distance" label-width="106px">
          <el-input v-model="formData.distance" style="width: 200px;margin-right: 6px" type="number" maxlength="10" placeholder="请输入距离" />公里
        </el-form-item>
        <el-form-item label="建议游览时长" prop="duration" label-width="106px">
          <el-input v-model="formData.duration" style="width: 200px;margin-right: 6px" type="number" maxlength="10" placeholder="请输入游览时长" />天
        </el-form-item>
      </el-form>
    </div>
    <div style="margin: 5% 0 0 5%;">
      <el-button plain style="margin-right: 3%;" @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="handleChangeStudentInfo">保存</el-button>
    </div>
  </div>
</template>

<script>
import TableMixins from '@/components/WxTables/mixins'
import { tourScenicGetListByCon, tourScenicItemGetListByCon } from '@/api/scenic'
export default {
  name: 'CommodityInfo',
  mixins: [TableMixins],
  props: {
    formData: {
      type: Object
    }
  },
  data() {
    return {
      tags: [],
      inputVisible: false,
      inputValue: '',
      qiNiuToken: '',
      ruleForm: {
        name: [
          { required: true, message: '请填写路线名称', trigger: 'blur' }
        ],
        tour_scenic_id: [
          { required: true, message: '请选择景区', trigger: 'blur' }
        ],
        distance: [
          { required: true, message: '请填写距离', trigger: 'blur' }
        ],
        duration: [
          { required: true, message: '请填写建议游览时长', trigger: 'blur' }
        ]
      },
      parentIndex: 0,
      editIsAdd: '',
      isType: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      addParentsList: {
        relationship: '',
        name: '',
        tel_num: '',
        img: ''
      },
      imageUrl: '',
      parentsIndex: 0,
      editJanitor: false,
      select_dept: [],
      scenicList: [],
      scenicSpotList: [],
      scenicSpot: '',
      scenicSpotName: [],
      zoom: 11,
      center: [121.006725,29.144079],
      postList: [],
      addMarkers: [],
      polyline: {
        path: [],
        events: {
          end: (e) => {
            let newPath = e.target.getPath().map(point => [point.lng, point.lat]);
            this.postList = JSON.parse(JSON.stringify(newPath))
          }
        },
        editable: false
      },
    }
  },
  created() {
    this.firstLoad = false
    this.tags = this.formData.label_arr
    this.getScenicList()
  },
  methods: {
    /**
     * 获取景区列表
     */
    getScenicList() {
      tourScenicGetListByCon({town_id:this.town_id,level:'label'}).then(res => {
        this.scenicList = res.data.data
      })
    },
    /**
     * 获取景点列表
     */
    getScenicSpotList(scenic_id) {
      tourScenicItemGetListByCon({scenic_id}).then(res => {
        this.scenicSpotList = res.data.data
      })
    },
    /**
     * 选择景区
     */
    changeScenic(e) {
      this.getScenicSpotList(e)
      this.scenicSpot = ''
    },
    /**
     * 增加景点
     */
    handleAdd() {
      if(this.scenicSpot) {
        const item_scenic_spot = this.scenicSpotList.filter(res=>res.id === this.scenicSpot)[0]
        const { lon, lat } = item_scenic_spot
        const item_obj = {
          position: [lon, lat]
        }
        this.addMarkers.push(item_obj)
        this.polyline.path.push([lon,lat])
        this.scenicSpotName.push({name: item_scenic_spot.name})
        this.formData.tour_scenic_item_id_arr ? this.formData.tour_scenic_item_id_arr.push(this.scenicSpot)
          : this.formData.tour_scenic_item_id_arr = [this.scenicSpot]
      }else{
        this.$message.warning('请选择景点')
      }
    },
    /**
     * 编辑路线
     */
    changeEditable() {
      this.polyline.editable = !this.polyline.editable;
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleIsAdd(type, index) {
      this.editIsAdd = type
      this.parentIndex = index
      if (type === 'create') {
        this.isType = '添加'
        this.addParentsList = {}
      }
      if (type === 'edit') {
        this.isType = '编辑'
        this.addParentsList = JSON.parse(JSON.stringify(this.formData.parents[index]))
      }
      this.editJanitor = true
    },
    beforeAddAvatarUpload(file) {
      uploadNormalFile(file, (res) => {
        this.$set(this.addParentsList, 'img', res)
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /**
     * 保存
     */
    handleChangeStudentInfo() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(!this.addMarkers.length) return this.$message.warning('请选择途经景点')
          if(this.polyline.editable) return this.$message.warning('请确认路线是否完成')
          let list = JSON.parse(JSON.stringify(this.formData));
          let num = 1
          if(this.postList.length) {
            list.location_point_arr = this.postList.map(res=> {
              if(!res[0]) {
                const spot = this.addMarkers[num].position
                num ++
                return [Number(spot[0]),Number(spot[1])]
              }else{
                return res
              }
            })
          }else{
            list.location_point_arr = this.addMarkers.map(res=> res.position)
          }
          list.spot_count = this.addMarkers.length
          this.$emit('saveFrom',list)
        } else {
          return false;
        }
      });
    },
  }
}
</script>
<style scoped>
.amap-wrapper {
  height: 24rem;
  margin: 24px 0
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.time_title{
  font-size: 14px;
  color: #606266;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="scss" src="./style/Form.scss" scoped>

</style>
